<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta http-equiv="Content-Type" content="text/html;  charset="UTF-8">
    <title>登录界面</title>
    <style>
        html,body{
            height: 100%;
        }
        body{
            background: #006666;
        }
        h1{
            color: #FFF;
            text-align: center;
        }
        .container{
            margin: 100px auto;
            width: 30%;
        }
        form{
            background: #FFF;
            height: 300px;
            width: 100%;
            border-radius: 10px;
            position: relative;
        }
        label{
            color: #000;
            font-weight: bold;
            font-size: 20px;
            margin-left: 40px;
        }
        input{
            text-align: left;
            margin: 10px;
        }
        .input{
            width: 80%;
            height: 35px;
            margin-left: 40px;
        }
        .checkbox{
            margin-left: 30px;
        }
        a{
            text-decoration: none;
            font-weight: bold;
        }
        .submit{
            display: inline-block;
            margin-top: 0;
            margin-left:145px;
            background: #000;
            border: none;
            color: #FFF;
            height: 35px;
            width: 100px;
            text-align: center;
            font-weight: bold;
            border-radius: 5px;
        }
        .left{
            margin: 20px;
        }
        .right{
            position: absolute;
            right: 20px;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <h1>用户登录</h1>
        <form>
            <br>
            <label for="">用户名</label><br>
            <input type="text" name="" id="useRname" class="input" value="" placeholder="用户名admin"><br>
            <label for="pwd">密码</label><br>
            <input type="password" name="" id="pWd" class="input" value="" placeholder="密码admin">
            <div class="checkbox">
                <input type="checkbox">
                <span>记住密码</span>
            </div>
            <br>
            <a href="enroll.html" class="right">注册账号</a>
        </form>
		<button type="submit" class="submit" onclick="submits()" >
		开始登录</button>
    </div>
    <script type="text/javascript">
		
	 function submits()
	 {
	  
				var userName = document.getElementById("useRname").value;
	 	        var pwd = document.getElementById("pWd").value;
	 	        let xhr = new XMLHttpRequest()
	 	        //2、调用xhr中的open()函数,创建一个Ajax的请求  
	 	       // xhr.open('post', 'http://127.0.0.1:4523/m1/4678185-0-default/test02',true)
			   xhr.open('post', 'http://127.0.0.1:8080',true)
	 	           //3、设置 Content-Type属性（固定写法） 
	 	         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8')
	 	        //3、调用xhr的send函数，发起请求
	 	        //xhr.send('?account=45&password=112334')
				xhr.send("?account=" + userName +"&password=" + pwd)
	 	        //4、监听 onreadystatechange 事件
	 	        xhr.onreadystatechange = function () 
	 			{
	 	            // if (xhr.readyState === 4 && xhr.status === 200) {  //固定写法
	 	            //     //数据获取成功，获取服务器响应的数据 
	 	            //     console.log(xhr.responseText)
	 	            // }
	 				
	 				if (xhr.status === 200)
	 				{ // 200表示请求成功  
	 				    var data = xhr.responseText; // 获取响应数据 
	 				    //var data = JSON.parse(xhr.responseText); // 将响应的JSON字符串转换为JavaScript对象  
	 				    console.log(data); // 打印响应数据  
						//window.location.assign("select");
						window.location.href="select";
						self.location.href=select;
						location.reload();
						console.log("跳转"); 
						//window.open("select");
						//window.navigate("/select");
						 //location.replace("select");
						 //location.href = 'select';
					
	 				} 
	 				else 
	 				{  
	 					console.error('请求失败，状态码：' + xhr.status);  
	 				}  
	 				
	 	        }
	 
	};

	
	 


    </script>
</body>
 
</html>